import React, {Component} from 'react';
import {hot} from 'react-hot-loader/root';
import {connect} from 'dva';
import {Form, Input, Button, Checkbox} from 'antd';
const formItemLayout = {
    labelCol: {span: 4},
    wrapperCol: {span: 8}
};
const formTailLayout = {
    labelCol: {span: 4},
    wrapperCol: {span: 8, offset: 4}
};

@connect(({global, forms}) => ({
    forms,
    global
}))
@Form.create()
class RouteForms extends Component {
    constructor(props) {
        super(props);
        this.state = {
            checkNick: false
        };
    }

    check = () => {
        this.props.form.validateFields(err => {
            if (!err) {
                console.info('success');
            }
        });
    };

    handleChange = e => {
        this.setState(
            {
                checkNick: e.target.checked
            },
            () => {
                this.props.form.validateFields(['nickname'], {force: true});
            }
        );
    };

    render() {
        const {getFieldDecorator} = this.props.form;
        return (
            <section>
                <Form.Item {...formItemLayout} label="名称">
                    {getFieldDecorator('username', {
                        rules: [
                            {
                                required: true,
                                message: '请输入您的名称'
                            }
                        ]
                    })(<Input style={{width: '200px'}} placeholder="请输入您的名称" />)}
                </Form.Item>
                <Form.Item {...formItemLayout} label="昵称">
                    {getFieldDecorator('nickname', {
                        rules: [
                            {
                                required: this.state.checkNick,
                                message: '请输入您的昵称'
                            }
                        ]
                    })(<Input style={{width: '200px'}} placeholder="请输入您的昵称" />)}
                </Form.Item>
                <Form.Item {...formTailLayout}>
                    <Checkbox checked={this.state.checkNick} onChange={this.handleChange}>
                        昵称是否必填
                    </Checkbox>
                </Form.Item>
                <Form.Item {...formTailLayout}>
                    <Button type="primary" onClick={this.check}>
                        提交
                    </Button>
                </Form.Item>
            </section>
        );
    }
}

export default hot(RouteForms);
